<template>
  <div
    class="flex flex-row w-h-full"
    id="main-box"
  >
    <!-- 博客图片 -->
    <div class="flex-1">
      <UniCosImage
        class="w-h-full"
        :src="picture"
        :format="CosImgFormatSuffix.WEBP"
      ></UniCosImage>
    </div>
    <!-- 文章信息 -->
    <div
      style="flex: 4; position: relative"
      class="flex flex-row h-full"
    >
      <div
        style="flex: 1"
        class="flex flex-col pl-2"
      >
        <div
          id="top-text"
          class="w-full font-bold text-lg"
          style="flex: 1"
        >
          {{ title }}
        </div>
        <div
          id="center-text"
          class="w-full text-sm opacity-60"
          style="flex: 3"
        >
          {{ content }}
        </div>
        <div
          id="bottom-text"
          class="w-full text-xs opacity-30 italic"
          style="flex: 1"
        >
          阅读量:{{ readNum }} 日期:{{ date }}
        </div>
        <div class="absolute right-0 top-0 text-sm italic opacity-20">
          ID: {{ id }}
        </div>
      </div>

      <div class="content-box flex">
        <div
          class="icon-box"
          @click="$emit('edit', value)"
        >
          <OhVueIcon name="md-modeeditoutline-round"></OhVueIcon>
        </div>
        <div
          class="icon-box"
          @click="$emit('export', value)"
        >
          <OhVueIcon name="la-file-export-solid"></OhVueIcon>
        </div>
        <div
          class="icon-box"
          @click="$emit('delete', value)"
        >
          <OhVueIcon name="ri-delete-bin-line"></OhVueIcon>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { OhVueIcon } from "oh-vue-icons";
import { CosImgFormatSuffix } from "~/models/cos";
const props = defineProps([
  "title",
  "content",
  "date",
  "picture",
  "id",
  "readNum",
  "value",
]);
const emit = defineEmits(["edit", "export", "delete"]);
</script>

<style lang="scss" scoped>
#main-box {
  & .icon-box {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;

    &:hover {
      transition: all 0.3s ease;
      color: var(--color-primary);
      opacity: 1;
      cursor: pointer;
    }
  }

  &:hover .icon-box {
    opacity: 0.8;
  }
}

.content-box {
  width: 20%;
  height: 20%;
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
